<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-form-model
        layout="inline"
        :model="queryParam"
      >
        <a-row :gutter="15">
          <a-col :md="6" :sm="24">
            <a-form-item label="设计人员">
              <a-select v-model="queryParam['filter[design_uid]']" placeholder="请选择设计师">
                <a-select-option v-for="(item,index) in designerOpts" :key="index" :value="index">{{item}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="24">
            <a-form-item label="定稿时间">
              <a-range-picker v-model="queryParam['sj_confirm_time_start']" @change="onChangeConfirm" />
            </a-form-item>
          </a-col>
          <template v-if="advanced">
            <a-col :md="6" :sm="24">
              <a-form-item label="下单时间">
                <a-range-picker v-model="queryParam['submit_time_start']" @change="onChangeSubmit" />
              </a-form-item>
            </a-col>
            <a-col :md="6" :sm="24">
              <a-form-item label="指派时间">
                <a-range-picker v-model="queryParam['design_at_start']" @change="onChangeReceive" />
              </a-form-item>
            </a-col>
          </template>
          <a-col :md="!advanced && 8 || 24" :sm="24">
                <span class='table-page-search-submitButtons' :style="advanced && { float: 'right', overflow: 'hidden' } || {}">
                  <a-button type="primary" @click="$refs.table.refresh(true)">搜索</a-button>
                  <a-button style="margin-left: 8px" @click="resetForm">重置</a-button>
                  <a @click="toggleAdvanced" style="margin-left: 8px">
                    {{ advanced ? '收起' : '展开' }}
                    <a-icon :type="advanced ? 'up' : 'down'" />
                  </a>
                </span>
          </a-col>
        </a-row>
      </a-form-model>
    </div>
    <div class="table-operator">
      <s-table
        bordered
        ref="table"
        size="middle"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        :alert="true"
        :row-key="(record) => record.uid"
        :columns="stateColumns"
        :data="stateData"
      >
        <template slot="design_name" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="all_num" slot-scope="text,record">
<!--          <a-tag color="red" @click="onModal(record.uid, '')">{{text}}</a-tag>-->
          <a-tag color="red" @click="toDesignFilter(record.uid)" style="cursor: pointer">{{text}}</a-tag>
        </template>
        <template slot="over_num" slot-scope="text, record">
<!--          <a-tag color="red" @click="onModal(record.uid, '100')">{{text}}</a-tag>-->
          <a-tag color="red" @click="toDesignFilter(record.uid)" style="cursor:pointer;">{{text}}</a-tag>
        </template>
        <template slot="converted_logos_num" slot-scope="text">
          <a-tag color="red">{{text}}</a-tag>
        </template>
        <template slot="dgl" slot-scope="text,record">
          <a-tag v-if="record.over_num != 0 || record.all_num != 0" color="red">{{`${(record.over_num/record.all_num * 100).toFixed(2)}%`}}</a-tag>
          <a-tag v-else color="red">0%</a-tag>
        </template>
      </s-table>
    </div>
    <a-modal
      v-model="visible"
      title="设计师稿件列表"
      :width="1200"
      :footer="null"
    >
      <s-table
        bordered
        ref="table2"
        size="middle"
        v-if="visible"
        :row-key="(record) => record.cb_id"
        :columns="listColumns"
        :data="listData"
      >
        <div
          slot="filterDropdown"
          slot-scope="{ setSelectedKeys, selectedKeys, confirm, clearFilters, column }"
          style="padding: 8px"
        >
          <a-input
            v-ant-ref="c => (searchInput = c)"
            :placeholder="`搜索${column.title}`"
            :value="selectedKeys[0]"
            style="width: 188px; margin-bottom: 8px; display: block;"
            @change="e => setSelectedKeys(e.target.value ? [e.target.value] : [])"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 90px; margin-right: 8px"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 90px">
            重置
          </a-button>
        </div>
        <div
          slot="filterRange"
          style="padding: 8px"
        >
          <a-range-picker
            style="width: 228px; margin-bottom: 8px; display: block;"
          />
          <a-button
            type="primary"
            icon="search"
            size="small"
            style="width: 110px; margin-right: 8px"
          >
            搜索
          </a-button>
          <a-button size="small" style="width: 110px">
            重置
          </a-button>
        </div>
        <template slot="official_fee" slot-scope="text,record">
          <a-tag color="red">官费：{{text}}</a-tag><br>
          <a-tag color="red">价格：{{record.price}}</a-tag><br>
          <a-tag color="red">代理费：{{record.agency_fee}}</a-tag>
        </template>
        <template slot="action" slot-scope="text,record">
          <a-button type="link" size="small" @click="toDesignDetail(record.cb_id)">详情</a-button>
        </template>
      </s-table>
    </a-modal>
  </div>
</template>

<script>
import { STable } from '@/components'
import { getListByDesigner, getDesignData } from '@/api/design.process'
import designColumns from '@/columns/design.process'

export default {
  components: {
    STable
  },
  name: 'OfDesigner',
  data () {
    return {
      stateColumns: designColumns.design_state,
      stateData: parameters => {
        return getDesignData(Object.assign(parameters, this.queryParam)).then(res => {
          this.designerOpts = res.result.designer_opts
          this.statusOpts = res.result.status2_opts
          return res.result
        })
      },
      // stateData: [],
      queryParam: {},
      designerOpts: {},
      statusOpts: {},
      advanced: true,
      visible: false,
      listColumns: designColumns.design_list,
      listData: parameters => {
        return getListByDesigner(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      selectedRowKeys: [],
      searchInput: null
    }
  },
  methods: {
    toggleAdvanced () {
      this.advanced = !this.advanced
    },
    onChangeReceive (date, dateString) {
      this.queryParam['filter[design_at_start]'] = dateString[0]
      this.queryParam['filter[design_at_end]'] = dateString[1]
    },
    onChangeConfirm (date, dateString) {
      this.queryParam['filter[sj_confirm_time_start]'] = dateString[0]
      this.queryParam['filter[sj_confirm_time_end]'] = dateString[1]
    },
    onChangeSubmit (date, dateString) {
      this.queryParam['filter[submit_time_start]'] = dateString[0]
      this.queryParam['filter[submit_time_end]'] = dateString[1]
    },
    resetForm () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    },
    onModal (uid, status) {
      this.queryParam['filter[designer]'] = uid
      this.queryParam['filter[status2]'] = status
      this.visible = true
    },
    toDesignFilter (id) {
      const params = this.queryParam
      params['filter[design_uid]'] = id
      this.$router.push({ name: 'DesignFilter', params: params })
    },
    toDesignDetail (id) {
      this.$router.push({ name: 'DesignEdit', params: { id } })
      this.visible = false
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    }
  }
}
</script>

<style scoped>

</style>
